Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Orthogonal / Building drawing tool #2699

Closed
wants to merge 13 commits into from
Closed

Orthogonal / Building drawing tool #2699

wants to merge 13 commits into from

Conversation

bhousel
Copy link
Member

@bhousel bhousel commented Jun 17, 2015

This adds a special drawing mode that lets you draw orthogonal shapes in just 2 clicks!
Drag along one wall and then click the opposite corner..

buildings

It is also smart enough to connect shapes to one another, inserting midpoints where needed..

buildings2

CC @jfirebaugh @aaronlidman @samanpwbb @tristen

I could use some code review and design advice before it is ready to merge.

TODO

  • restore hover behavior
    I had to disable hover behavior when in orthogonal drawing mode because the existing hover behavior relies heavily on mouseover. I think I can reimplement just by classing the right things in the move event handler.
  • figure out UI for this
    Currently for the UI, I just assigned shift-click to start drawing ways and areas in this mode. I feel that is a bit cheating (and won't work on tablets), so I think what might be nicer is a way to cycle through the available drawing options by clicking on the Way/Area buttons and having the icon/text change, or maybe repeated presses of '2' or '3'. Or maybe make those into dropdowns. Not really sure what would be best.
  • add to help/walkthrough
    Self explanatory
  • support for circles too?
    The draw_way code is now mostly setup to accept any number of click targets, so it's not a big leap to make options to draw other shapes.

@tristen
Copy link
Member

tristen commented Jun 22, 2015

@bhousel this is awesome!

Currently for the UI, I just assigned shift-click to start drawing ways and areas in this mode. I feel that is a bit cheating (and won't work on tablets), so I think what might be nicer is a way to cycle through the available drawing options by clicking on the Way/Area buttons and having the icon/text change, or maybe repeated presses of '2' or '3'. Or maybe make those into dropdowns. Not really sure what would be best.

Personally, I don't think there needs to be a UI around this. shift-click is a great option for exposing it and we can do a good job documenting it under a key bindings section in the documentation. Tablet is an issue but perhaps it's enabled via gesture? (i.e pinch when the editor is in a polygon draw mode)

@quarksteilchen
Copy link

Hi,
just an idea to make this a bit more intuitive and with less clicks:

You could just click one corner, then the diagonally opposite corner. a rectangle could then be automatically generated and you do not have the limitation of having to be very exact on the first line.

houses

Starting this mode with shift is a good idea i think.

@bhousel
Copy link
Member Author

bhousel commented Dec 17, 2015

You could just click one corner, then the diagonally opposite corner. a rectangle could then be automatically generated and you do not have the limitation of having to be very exact on the first line.

Drawing a side is needed because two clicks are not enough to uniquely identify a rectangle..

You can fit ∞ rectangles to a diagonal segment:

twoclicks

@quarksteilchen
Copy link

you are right :-). sorry.
you need three clicks, and can then fit the orthogonal rectangle into it.

@slhh
Copy link
Contributor

slhh commented Dec 19, 2015

A drawing mode requiring two clicks only in most cases seems to be possible. In other cases dragging one node will be required in addition to this.
Most buildings are likely parallel/orthogonal to the next building or the street. A rectangle is well defined by one diagonal segment if the angle of the rectangle is known.
Assume the rectangle is parallel/orthogonal to the next building if it is potentially touching.
Otherwise assume the rectangle is parallel/orthogonal to the next street, and if the next street is too far away assume the rectangle is a square, which is well definded by one diagonal segment.
This is likely a good guess, but of course it is sometimes wrong. Thus the user needs to be able to modify it. This can be done by dragging one of the other nodes not belonging to the diagonal segment. In case of dragging such a node immediately after drawing the diagonal segment dragging should be restricted along the circumcircle of the rectangle. Refitting the rectange to the diagonal segment the fourth node should be moved automatically.

@slhh
Copy link
Contributor

slhh commented Dec 19, 2015

For the UI the lower right corner of the Area button could contain a small dropdown arrow opening a menu with multiple drawing modes. The Area button should indicate the active mode. The button text "Area" can change to a multiline text "Area - 3-click" or "Area - 2-click" if the normal mode is not active.

@iandees
Copy link
Collaborator

iandees commented Feb 26, 2016

In JOSM, you get two clicks by selecting an existing "orthogonal-ish" polygon whose angles will be used to make further polygons.

That took me a really long time to figure out, so I thought I'd add it here. 😄

@bhousel
Copy link
Member Author

bhousel commented May 4, 2016

rebased to 1.9.4 😏

@pnorman
Copy link
Contributor

pnorman commented May 4, 2016

Many buildings are L shaped. Can this help with those buildings?

On your second animation, do the 1st and 2nd buildings share a common node at the southeast of their common wall?

@bhousel
Copy link
Member Author

bhousel commented May 4, 2016

Many buildings are L shaped. Can this help with those buildings?

No, this just draws rectangles. But maybe someday we'll support merging 2 rectangles together with #435 (likely), or possibly extrude edges with #2986.

On your second animation, do the 1st and 2nd buildings share a common node at the southeast of their common wall?

Yes, they do - I didn't hover long enough over it to see, but this code connects nodes to existing lines, unless you hold down the 'Alt' key.

@pnorman
Copy link
Contributor

pnorman commented May 4, 2016

On your second animation, do the 1st and 2nd buildings share a common node at the southeast of their common wall?
Yes, they do - I didn't hover long enough over it to see, but this code connects nodes to existing lines, unless you hold down the 'Alt' key.

How far off from 90 degrees can you get with the first line of the second building before they no longer join?

@bhousel
Copy link
Member Author

bhousel commented May 5, 2016

How far off from 90 degrees can you get with the first line of the second building before they no longer join?

IIRC the snapping threshold is something like within 3px.

@homersimpsons
Copy link
Contributor

Any news on this ?

@bhousel
Copy link
Member Author

bhousel commented Jul 1, 2017

Any news on this ?

Nope, news would be here. In my mind I have an idea of how #3123 could unblock it.

@dalekunce
Copy link

@bhousel wanted to plug putting some time in on this. @mikelmaron and I looking at a bunch of ways to improve quality of edits during mapathons and this is for sure one of the top ways. We are having a huge upswing in new mappers at mapathons and one of our biggest cleaning/validation issues is non-squared buildings. Having this tool available would save literally thousands of man hours a year and make many of the people who validate/clean new mapper data a lot happier.

@slhh
Copy link
Contributor

slhh commented Aug 21, 2017

This is just a modification of the area mode, we should add a have a right-click context menu to the area mode button in order to configure the mode. To make the user aware of the context menu, we can add "(right-click to configure)" to the tooltip of the area mode button. The special configurations of the mode could be indicated by a slightly modified area mode button and/or a toolbar icon.

If desired, there could be controls to set the building mode from the toolbar drawer duplicating the area button context menu function, but the toolbar drawer seems to be the wrong place for the only control of the special area mode because it isn't associated with the area mode.

@sisskind
Copy link

@bhousel if you are looking to offload this task for iD 2.0, happy to take a look at it. Unsure if you were still cranking at it or not.

@tordans
Copy link
Collaborator

tordans commented Dec 31, 2017

I would love to see this feature @bhousel @sisskind.

Some suggestions for the interface:

Interface goals / interaction goals:

(a) Introduce a way to draw square blocks as a second option to free form areas.
(b) When drawing a square block a set of tags should be applied to the new area form for the usecase "draw many houses".
(c) The UI should explain (new) users whats going on.

Wireframe 1 @bhousel

See #2699 (comment)

  • I think the interaction on the drawing board in on point. Especially with the interaction between two shapes (second screenshot).
  • I think the buttons could be improved - see below.

Wireframe 2

There are two ways to add shapes now, "Area" which can be any form and behave the same way as before and "Block" (naming todo) which behave like Wireframe 1 shows.

One option would be to expose those two button at the same level.

(Just to be sure: This is not a design, the form of buttons are just a scribble. :-))

bildschirmfoto 2017-12-31 um 08 54 02

  • Advantage: Give the new feature a lot of attention
  • Disadvantage: I feel like its a pro user feature that could be hidden a bit more for those who discover it. Especially since the "Area" tool can be used for the same purpose but with more editing steps.

Wireframe 3

Another option would be to introduce a split button (https://getbootstrap.com/docs/3.3/components/#btn-dropdowns-split) that allows to select the secondary editing option. Both edit shapes, so they are in one dropdown but they behave differently.

bildschirmfoto 2017-12-31 um 08 52 41

Wireframe 4

Both solutions need to explain (b) and solve (c) which they cannot do without more text since the UI element is nothing people really know from office software and such.

One way to solve it would be to add a information overlay once you click the "Block" tool.

  • There is a "hide forever" link to remove the tip
  • The text explains the usecase
  • The text explains the "copy tags from previous shape" behaviour
  • Everything else should be on a separate help page. Including the click 1, click 2 behaviour since those can be discovered easily by just using the tool.

bildschirmfoto 2017-12-31 um 08 54 08

How to handle tags

About (b): How should the Block-Tool handle tags.

  1. The same way as area, so its just blank or area=yes?
  2. Copy tags from previously selected shape, fallback to the same as the area-tool
    • My favorite ATM, but I think this is best understood in a prototype. This would introduce a new pattern of behaviour into the editor which should be considered carefully. I expect the interaction to be quite complex to grasp so it would only be something for pro users. Which is fine as long as other users have a good experience (expected behaviour, feel in control, helpful/fast) as well.
  3. Copy tags from previously selected shape, fallback to building
  4. Always apply basic building tags
    • IMO both 3 and 4 are too close to the one use case which I dont like.

@bhousel
Copy link
Member Author

bhousel commented Dec 31, 2017

I would love to see this feature @bhousel @sisskind.
Some suggestions for the interface:

I appreciate the time you spent on those wireframes @tordans but I don't like any of them. The primary persona that I design for is someone who has never used a map editor before. We meet a lot of people like this at mapathons.

Adding more buttons to the top bar doesn't scale, and it introduces confusion for new users. If they have to ask "why would I use block instead of area" then we've failed them.

@tordans
Copy link
Collaborator

tordans commented Dec 31, 2017

@bhousel Well I guess I am out then, soon. We now touch a level of interaction design discussion which does not lead to results in a comment box - in my experience.

Lets see what other options are proposed that are discoverable, usable and easy to understand.

@slhh
Copy link
Contributor

slhh commented Jan 2, 2018

I agree with @bhousel , except that iD should also support the persona of an typical intermediate local mapper well. It doesn't make sense for OSM if users have to switch to a totally different editor (JOSM) in order to program productive. We need to find a way to support both personas well.

Reproducing tags seems to be a must have feature, and we should also have an orthogonal mode according to #3641 and #3637. @edpop Why did you closed these?

The three click drawing mode seems to target mappers, who intend to do large scale edits, and who are hopefully more advanced. I would consider these to be out out scope of iD. Maybe, the 3-click drawing mode is still a nice to have feature for the intermediate users, but it's of limited use because many buildings have L- or T-shape, and it might led to wrong mapping of such shapes.

Lets see what other options are proposed that are discoverable, usable and easy to understand.

A right click on the mode buttons should open a configuration dialog. The tooltip should make user aware of the right-click dialog.
Instead of right-click dropdown arrows as shown in wireframe 3 might be used.

In case of the area mode, the configuration dialog should contain:

  • A checkbox to assign predefined tags to subsequently drawn areas
  • An editor for the predefined tags
  • A button to clone the tags of the current selected feature to the editor, and there could be a warning when cloning from an non area feature.
  • Controls for pretty angles: force multiples of 45° or 90°, invert SHIFT behavior (always force pretty angles, but allow arbitrary angle with SHIFT). These controls can also help to make the SHIFT function discoverable.
  • Optionally: checkbox for fast (3-click) rectangle drawing mode.

The user need to be made aware that a special behavior of the mode is active.
Therefore, the button should slightly change, maybe to a diffenent colour, just to indicate that something is special. In addition, when in the draw mode the sidebar should indicate special settings of the mode including any predefined tags to be applied. The user should be able to deactivate any special behavior directly in the sidebar. This also makes it easier for unexperienced users, who have accidentially activated a special setting, to get to get rid of it, even if they don't know where.

@edpop
Copy link
Contributor

edpop commented Jan 2, 2018

Hi, @slhh. I waited almost a year for merge or any feedback, so I forked.

@homersimpsons
Copy link
Contributor

@slhh Maybe it could support via an "advanced" button (you get the idea), but if it's too hard and time consuming it's better not to think about thoses features. The goal of iD is "just" to bring new users in my mind, experienced users should swith to others editors if they need more tools.
I usually map easy things using iD and complete more complicated things with JOSM. Sometimes just drawing with iD and applysing tags with JOSM. Plus using shortcuts and tag suggestion it can be fast.

@slhh
Copy link
Contributor

slhh commented Jan 7, 2018

Maybe it could support via an "advanced" button (you get the idea)

Using a right-click context menu/dialog to configure, as I have proposed above, is already something like an advanced button. The features would be invisible for new users except of a small hint in the tooltip.
Also the sidebar would be unaffected (empty in the drawing modes) as long as no special mode modification is activated.

but if it's too hard and time consuming it's better not to think about thoses features.

I would never have requested the 3 click drawing mode, but I think HOT projects would like it. Btw, I would prefer if HOT projects were using JOSM, because they generate mass data.

Replicating tags is a widely requested and agreed on feature #1761. Buildings are an important usecase, but not the only one. Therefore, it needs to be separated from from the building tool.
As iD is intended mainly for less experienced users we should use the safest and most intuitive way to replicate the tags. We should avoid the risk of leaving buildings untagged because of a the workflow of adding many untagged buildings first and appying tags later. And we should also reduce the risk of copying unwanted tags. Tags which are accidentially copied can be hard to discover on the destination object because the all fields section doesn't cover all tags, and all tags section might be collapsed.
Therefore, the user needs to be made aware which tags a copied.

@manfredbrandl
Copy link
Contributor

manfredbrandl commented Jan 27, 2018

I suggest a modifier key (e.g. Shift) can be used to change the area mode into a rectangle mode before the placement of the third node. When the modifier key is pressed after the placement of the second node the rectangle should be shown and the rectangle area should finish with the placement of the third node. Alternatively the modifier key could restrict drawing to rectangular angles only. @bhousel what do you think?

@slhh
Copy link
Contributor

slhh commented Jan 27, 2018

@manfredbrandl
We should not waste the SHIFT modifier to optimize the special usecase of rectangular buildings only.

Alternatively the modifier key could restrict drawing to rectangular angles only.

When placing the third or any further node, this makes sense. It does also support L or T-shaped buildings, etc.. Maybe, we can allow any multiple of 45° instead of 90° to make it more flexible.

When placing the second node while SHIFT is down, the placed edge should be forced to be rectangular or parallel to one of the edges (of any other way) which are connected to the first node of the area. E.g. to draw a building parallel to the next one.

When clicking the last or first node again to finish the area while SHIFT is pressed, the area should be completed with two othogonal edges using a right angle in the clicked node.

Placing a rectangle would need two normal clicks to place the first and second node, and two SHIFT-clicks on the third node to place it and finish the area. One click more than suggested above, but more flexible.

Pressing SHIFT while placing the first node would not have any meaning. In case a 3-click rectangle drawing mode is really desired, it might be activated by pressing shift while placing the first node.

@manfredbrandl
Copy link
Contributor

manfredbrandl commented Jan 27, 2018

Maybe, we can allow any multiple of 45° instead of 90° to make it more flexible.

Multiples of 45° is a good idea.

... a 3-click rectangle drawing mode is really desired, it might be activated by pressing shift while placing the first node.
That's not neccesary, starting rectangular at connected area is more important.

When we introduce Shift restricts angled to multiple of 45° we should also allow this for adding nodes by taking the midpoint triangles.

@edpop
Copy link
Contributor

edpop commented Jan 28, 2018

@manfredbrandl, it was done in #3641.

@MRVDH
Copy link

MRVDH commented Jun 2, 2019

What's the status on this? Still really looking forward to this feature, but it seems inactive.

@quincylvania
Copy link
Collaborator

What's the status on this?

@MRVDH We've actually been working on this recently! See #6453. You can test it out on the preview site. It doesn't do everything that this PR does yet, but it will.

@MRVDH
Copy link

MRVDH commented Mar 20, 2020

So I assume this is not going to happen any time soon?

@quincylvania
Copy link
Collaborator

@MRVDH I closed this incidentally by renaming the master branch, but it was never going to get merged anyway on account of being almost 5 years stale.

However, I am aiming to get a square drawing tool out this year.

@aawiseman
Copy link

Checking on this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Priorities
Toolbar
Development

Successfully merging this pull request may close these issues.

None yet